<div class="chart-container">  
    <canvas id="{{ chart_id|default:'barChart' }}" height="{{ height|default:300 }}"></canvas>  
</div>  

<script>  
document.addEventListener('DOMContentLoaded', function() {  
    const ctx = document.getElementById('{{ chart_id|default:"barChart" }}').getContext('2d');  
    
    // 数据准备  
    {% if labels %}  
    const labels = [{% for label in labels %}'{{ label }}',{% endfor %}];  
    {% elif data %}  
    const labels = [{% for item in data %}'{{ item.name }}',{% endfor %}];  
    {% else %}  
    const labels = [];  
    {% endif %}  
    
    {% if income_data and expense_data %}  
    // 收入支出对比数据  
    const datasets = [  
        {  
            label: '收入',  
            backgroundColor: 'rgba(28, 200, 138, 0.8)',  
            borderColor: 'rgba(28, 200, 138, 1)',  
            borderWidth: 1,  
            data: [{% for value in income_data %}{{ value }},{% endfor %}]  
        },  
        {  
            label: '支出',  
            backgroundColor: 'rgba(231, 74, 59, 0.8)',  
            borderColor: 'rgba(231, 74, 59, 1)',  
            borderWidth: 1,  
            data: [{% for value in expense_data %}{{ value }},{% endfor %}]  
        }  
    ];  
    {% else %}  
    // 单一数据集  
    const datasets = [{  
        label: '{{ data_label|default:"金额" }}',  
        backgroundColor: [  
            'rgba(78, 115, 223, 0.8)', 'rgba(28, 200, 138, 0.8)', 'rgba(54, 185, 204, 0.8)',   
            'rgba(246, 194, 62, 0.8)', 'rgba(231, 74, 59, 0.8)', 'rgba(133, 135, 150, 0.8)',  
            'rgba(90, 92, 105, 0.8)', 'rgba(102, 16, 242, 0.8)', 'rgba(111, 66, 193, 0.8)'  
        ],  
        borderColor: [  
            'rgba(78, 115, 223, 1)', 'rgba(28, 200, 138, 1)', 'rgba(54, 185, 204, 1)',   
            'rgba(246, 194, 62, 1)', 'rgba(231, 74, 59, 1)', 'rgba(133, 135, 150, 1)',  
            'rgba(90, 92, 105, 1)', 'rgba(102, 16, 242, 1)', 'rgba(111, 66, 193, 1)'  
        ],  
        borderWidth: 1,  
        data: [{% for item in data %}{{ item.amount|default:"0" }},{% endfor %}]  
    }];  
    {% endif %}  
    
    // 创建图表  
    new Chart(ctx, {  
        type: {% if horizontal %}'horizontalBar'{% else %}'bar'{% endif %},  
        data: {  
            labels: labels,  
            datasets: datasets  
        },  
        options: {  
            maintainAspectRatio: false,  
            layout: {  
                padding: {  
                    left: 10,  
                    right: 25,  
                    top: 25,  
                    bottom: 0  
                }  
            },  
            scales: {  
                xAxes: [{  
                    gridLines: {  
                        display: true,  
                        drawBorder: true  
                    },  
                    ticks: {  
                        maxTicksLimit: 10,  
                        callback: function(value, index, values) {  
                            {% if horizontal %}return '¥' + value.toFixed(2);{% else %}return value;{% endif %}  
                        }  
                    }  
                }],  
                yAxes: [{  
                    gridLines: {  
                        display: true,  
                        drawBorder: true  
                    },  
                    ticks: {  
                        beginAtZero: true,  
                        callback: function(value, index, values) {  
                            {% if horizontal %}return value;{% else %}return '¥' + value.toFixed(2);{% endif %}  
                        }  
                    }  
                }]  
            },  
            legend: {  
                display: {% if income_data and expense_data %}true{% else %}false{% endif %}  
            },  
            tooltips: {  
                backgroundColor: "rgb(255,255,255)",  
                bodyFontColor: "#858796",  
                titleMarginBottom: 10,  
                titleFontColor: '#6e707e',  
                titleFontSize: 14,  
                borderColor: '#dddfeb',  
                borderWidth: 1,  
                xPadding: 15,  
                yPadding: 15,  
                displayColors: false,  
                intersect: false,  
                mode: 'index',  
                caretPadding: 10,  
                callbacks: {  
                    label: function(tooltipItem, chart) {  
                        const datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';  
                        return datasetLabel + ': ¥' + tooltipItem.value.toFixed(2);  
                    }  
                }  
            },  
            title: {  
                display: {% if title %}true{% else %}false{% endif %},  
                text: '{{ title|default:"" }}',  
                fontSize: 16  
            }  
        }  
    });  
});  
</script>